<template>
	<view class="u-p-t-60 u-p-r-60 u-p-b-30 u-p-l-60 logincontainer">
		<u-avatar size="140" src="" mode="circle"></u-avatar>
		<u-form :model="loginModel" ref="form1" >
			<u-form-item left-icon="account-fill" left-icon-style="font-size:21px;color:#FF7670"><u-input
					placeholder="请输入账户" v-model="loginModel.username"></u-input></u-form-item>
			<u-form-item left-icon="lock" left-icon-style="font-size:21px;color:#FF7670"><u-input placeholder="请输入密码"
					v-model="loginModel.password"></u-input></u-form-item>
					<view class="passtext">
						忘记密码
					</view>
					
			<u-button :custom-style="customStyle1">登录</u-button>
			<u-button type="success" :custom-style="customStyle2">注册</u-button>
		
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
import color from '../../uni_modules/vk-uview-ui/libs/function/color';
	const loginModel = reactive({
		username: '',
		password: ''
	})
	const customStyle1 = reactive({
		marginTop:'20px',
		background:'#FF7670',
		color:'#FFF',
		width:'100%',
		
	})
	const customStyle2 = reactive({
		marginTop:'20px',
		width:'100%',
		
	})
</script>

<style lang="scss">
	.logincontainer {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.forms{
		width: 100%;
	}
	.passtext{
		display: flex;
		justify-content: flex-end;
		color: #FF7670;
		margin-top: 15px;
	}
	
</style>